<script setup>
import { Search, Edit, Delete } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus';

import {
  getAll,
  add,
  update,
  deleteById,
  getLike
} from '@/api/complain'
const inputValue = ref()
const complainList = ref([])
const loading = ref(false)

const refEdit = ref(null)
const isEdit = ref(false)
const refAdd = ref(null)
const isAdd = ref(false)
const EditForm = ref({
  id: '',
  stem: '',
  content: '',
  results: '',
})
const AddForm = ref({
  stem: '',
  content: '',
  person: '',
  iphone: ''
})

const getList = async() => {
  loading.value = true
  const res = await getAll()
  complainList.value = res.data
  loading.value = false
}
getList()

// isEdit 弹窗 点击取消 
watch(isEdit, () => {
  EditForm.value.results= ''
})
watch(isAdd, () => {
  AddForm.value.stem = ''
  AddForm.value.content = ''
  AddForm.value.person = ''
  AddForm.value.iphone = ''
})


const isEditOnSubmit = async() => {
  const updID = (EditForm.value.id)
  console.log(updID);
  console.log(EditForm.value);
  if (updID) {
    await update(EditForm.value)
    ElMessage.success('修改成功')
    EditForm.value.results = ''
    isEdit.value = false
  }
  getList()
}
const getStates = (state) => {
  if (state === 0) {
    return '已处理'
  } else {
    return '未处理'
  }
}

const handleDelete = async(row) => {
  const delID = row.id;
  try {
    // 使用await等待用户确认对话框的结果
    await ElMessageBox.confirm(
      '确认要删除该条记录吗?',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    // 直接调用deleteById函数并等待结果
    await deleteById(delID);
    ElMessage({ type: 'success', message: '成功删除', plain: true,});
    getList(); // 刷新列表
  } catch (error) {
    // 这里会捕获到用户点击取消的情况以及其他可能的异常
    ElMessage({ type: 'error', message: '取消删除' , plain: true,});
  }
}

const handleEdit = (row) => {
  isEdit.value = true
  EditForm.value.id = row.id
  EditForm.value.stem = row.stem
  EditForm.value.content = row.content
}

const AddComplain = () => {
  isAdd.value = true
}

const isAddOnSubmit = async() => {
  await refAdd.value.validate()   // 预先验证表单   
  const FormIphone = AddForm.value.iphone
  if (FormIphone) {
    await add(AddForm.value)
    // console.log(AddForm.value);
    ElMessage.success('新建成功')
    getList()
  }
  isAdd.value = false
}
const rules = {
  stem: [
    { required: true, message: '请输入标题', trigger: 'blur' },
    { min: 2, max: 10, message: '长度不符合规范哦！', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入投诉内容', trigger: 'blur' },
    { min: 2, max: 100, message: '长度不符合规范哦！', trigger: 'blur' }
  ],
  person: [
    { required: true, message: '请输入联系人', trigger: 'blur' },
    { min: 2, max: 5, message: '请输入正确的姓名哦！', trigger: 'blur' }
  ],
  iphone: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码哦！', trigger: 'blur' }
  ]
}

const getLikes = async()=>{
  const NewList = await getLike(inputValue.value)
  complainList.value = NewList.data
  inputValue.value = ''
}

</script>

<template>
  <page-container title="违规管理">

    <!-- 具名插槽 实现 按钮 -->
    <template #extra>
      <el-input @keyup.enter="getLikes" v-model="inputValue" style="width: 150px; 
      margin-right: 10px;" placeholder="搜索违规记录" :prefix-icon="Search" />

      <el-button type="primary" @click="AddComplain">新建</el-button>

    </template>

    <!-- 默认插槽 实现 主要内容 -->
    <el-table :data="complainList" style="width: 100%" header-align="center" v-loading="loading">
      <el-table-column label="序号" type="index" width="60" align="center" />
      <el-table-column prop="stem" label="标题" width="150" align="center" />
      <el-table-column prop="content" label="投诉内容" width="200" />
      <el-table-column prop="person" label="联系人" width="100" align="center" /> 
      <el-table-column prop="iphone" label="联系方式" width="120" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="170" align="center" />
      <el-table-column prop="state" label="状态" width="100" align="center" sortable>
        <template #default="{ row }">
          <el-button :type="getStates(row.state) == '已处理' ? 'success' : 'danger'" plain size="default">{{ getStates(row.state) }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="results" label="处理结果" width="200" align="center" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button :icon="Edit" type="primary" @click="handleEdit(row)" circle plain></el-button>
          <el-button :icon="Delete" type="danger" @click="handleDelete(row)" circle plain></el-button>
        </template>
      </el-table-column>

      <!-- 自定义空数据 -->
      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>

    </el-table>

    <!-- isEdit 弹窗 -->
    <el-dialog v-model="isEdit" title="处理违规" width="60%">
      <el-form ref="refEdit" :modal="EditForm" label-width="100px" style="padding-right: 30px">
        <el-form-item prop="stem" label="标题">
          <el-input v-model="EditForm.stem" disabled placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item prop="content" label="投诉内容">
          <el-input v-model="EditForm.content" disabled placeholder="请输入处理结果"></el-input>
        </el-form-item>
        <el-form-item prop="results" label="处理结果">
          <el-input v-model="EditForm.results" placeholder="请输入处理结果"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isEdit = false">取消</el-button>
          <el-button :plain="true" type="primary" @click="isEditOnSubmit"> 确认 </el-button>
        </div>
      </template>

    </el-dialog>

    <!-- isAdd 弹窗 -->
    <el-dialog v-model="isAdd" title="新建违规" width="60%">
      <el-form ref="refAdd" :model="AddForm" :rules="rules" label-width="100px" style="padding-right: 30px">
        <el-form-item prop="stem" label="投诉标题">
          <el-input v-model="AddForm.stem" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item prop="content" label="投诉内容">
          <el-input v-model="AddForm.content" placeholder="请输入投诉内容"></el-input>
        </el-form-item>
        <el-form-item prop="person" label="联系人">
          <el-input v-model="AddForm.person" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item prop="iphone" label="联系方式">
          <el-input v-model="AddForm.iphone" placeholder="请输入联系方式"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button @click="isAdd = false">取消</el-button>
          <el-button @click="isAddOnSubmit" type="primary" :plain="true">确认</el-button>
        </div>
      </template>
    </el-dialog>

  </page-container>

</template>

<style scoped>
.el-table,
.el-table-column {
  text-align: center;
}

</style>